<template>
  <div>流程管理</div>
  <div class="layout">
    <div class="box">
      <div class="header">
        <div class="left">
          <!-- 搜索 -->
          <el-input
            v-model="searchValue"
            style="width: 280px"
            placeholder="Please Input"
            :prefix-icon="Search"
          />
          <!-- 下拉选择 -->
          <el-select
            v-model="selectValue"
            clearable
            style="margin-left: 16px; width: 160px"
            placeholder="请选择所属栏目"
          >
            <el-option
              v-for="item in optionList"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>

        <el-button :icon="Delete" type="danger" @click="handleDelete">删除选中</el-button>
      </div>

      <el-table
        :data="filterTableData"
        stripe
        border
        style="width: 100%; max-height: 80%; overflow-y: auto"
        @select="onSelect"
        @select-all="onSelectAll"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column align="center" label="序号" type="index" width="85" />
        <el-table-column align="center" label="业务代码" prop="code" />
        <el-table-column align="center" label="业务名称" prop="name" />
        <el-table-column align="center" label="操作">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="onEdit(row)"> 编辑 </el-button>
            <el-button link type="primary" size="small" @click="onProcess(row)"> 流程 </el-button>
            <el-button link type="primary" size="small" @click="onTime(row)"> 时间 </el-button>
            <el-button link type="primary" size="small" @click="onDelete(row)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demo-pagination-block">
        <el-pagination
          current-page="100"
          page-size="100"
          :page-sizes="[10, 20, 30, 40]"
          size="large"
          layout="total,sizes, prev, pager, next,jumper"
          :total="1000"
        />
      </div>
    </div>
    <question />
  </div>
  <operationDialog
    :dialogVisible="dialogVisible"
    :type="type"
    :activeIndex="activeIndex"
    @onChangeVisible="dialogVisible = false"
  />
</template>

<script setup>
import { ref, toRaw, computed } from 'vue'
import { Delete, Search } from '@element-plus/icons-vue'
import question from '../components/question.vue'
import operationDialog from './components/operationDialog.vue'

// 搜索关键字
const searchValue = ref('')
// 下拉选择项
const selectValue = ref('')
// 弹窗
const dialogVisible = ref(false)
const activeIndex = ref(1)
const type = ref(null)

const tableData = ref([
  {
    id: '1',
    code: 'EY-083',
    name: '客户代表'
  },
  {
    id: '2',
    code: 'EY-096',
    name: '产品设计师'
  },
  {
    id: '3',
    code: 'EY-071',
    name: '法务专员'
  },
  {
    id: '4',
    code: 'EY-060',
    name: '测试工程师'
  },
  {
    id: '5',
    code: 'EY-057',
    name: '产品经理'
  },
  {
    id: '6',
    code: 'EY-077',
    name: '时长分析员'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  },
  {
    id: '7',
    code: 'EY-047',
    name: '3D设计师'
  }
])
const optionList = ref([...new Set(tableData.value.map((item) => item.name))])
const selectList = ref([])

// 搜索过滤数据
const filterTableData = computed(() => {
  return tableData.value.filter((item) => {
    return item.name.toLowerCase().includes(searchValue.value.toLowerCase())
  })
})

// 单选
const onSelect = (e) => {
  selectList.value = toRaw(JSON.parse(JSON.stringify(e)))
}

// 全选
const onSelectAll = (e) => {
  console.log(e)
}

// 多选项删除
const handleDelete = () => {
  const res = ref(
    tableData.value.filter((item) => {
      const val = toRaw(selectList.value).find((sel) => sel.id === item.id)
      return !val
    })
  )
  tableData.value = toRaw(res.value)
  console.log(toRaw(res.value))
}

// 编辑
const onEdit = (val) => {
  dialogVisible.value = true
  type.value = 'edit'
  activeIndex.value = val.id
}

// 流程
const onProcess = (val) => {
  dialogVisible.value = true
  type.value = 'process'
  activeIndex.value = val.id
}

// 时间
const onTime = (val) => {
  dialogVisible.value = true
  type.value = 'time'
  activeIndex.value = val.id
}

// 单选项删除
const onDelete = (val) => {
  dialogVisible.value = true
  type.value = 'delete'
  activeIndex.value = val.id
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 8px;
}

.el-table {
  &::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度为 5 像素。 */
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置滚动条轨道的背景颜色为浅灰色。 */
  }

  &::-webkit-scrollbar-thumb {
    background: #888; /* 设置滚动条滑块的背景颜色为深灰色。 */
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #bab9b9; /* 当鼠标悬停在滚动条滑块上时，背景颜色变为更深的灰色。 */
  }
}
::v-deep .el-table .el-table__cell {
  padding: 12px 0;
  font-size: 14px;
  line-height: 24px;
  color: #606266;
}
.layout {
  display: flex;
  justify-content: space-between;
  .box {
    position: relative;
    margin: 40px 40px;
    padding: 20px 20px;
    width: 1227px;
    height: 728px;
    background-color: #fff;

    .header {
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
    }

    .demo-pagination-block {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }
  }
}
</style>
